<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>麦知网后台管理</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style>
    /*
     * Style tweaks
     * --------------------------------------------------
     */
    html,
    body {
      overflow-x: hidden; /* Prevent scroll on narrow devices */
    }
    body {
      padding-top: 70px;
    }
    footer {
      padding: 30px 0;
    }

    /*
     * Off Canvas
     * --------------------------------------------------
     */
    @media screen and (max-width: 767px) {
      .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
      }

      .row-offcanvas-right
      .sidebar-offcanvas {
        right: -50%; /* 6 columns */
      }

      .row-offcanvas-left
      .sidebar-offcanvas {
        left: -50%; /* 6 columns */
      }

      .row-offcanvas-right.active {
        right: 50%; /* 6 columns */
      }

      .row-offcanvas-left.active {
        left: 50%; /* 6 columns */
      }

      .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 50%; /* 6 columns */
      }
    }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/Chart.js"></script>
    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">麦知网后台管理</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">网站情况</a></li>
            <li><a href="{% url 'applications:groups' %}">小组管理</a></li>
            <li><a href="{% url 'applications:courses' %}">课程管理</a></li>
            <li><a href="{% url 'applications:rewards' %}">悬赏管理</a></li>
            <li><a href="{% url 'applications:users' %}">用户管理</a></li>
            <li><a href="{% url 'applications:ifgroup' %}">小组审核</a></li>
            <li><a href="{% url 'applications:publisher' %}">发布者审核</a></li>
            <li><a href="{% url 'applications:invite' %}">内测—用户审核</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <h3 id="groupsandcourses">麦知网小组/课程统计</h3>
          <canvas id="canvas" height="450" width="830"></canvas>
          <script>

          var lineChartData = {
            labels : ["{{months.6}}月","{{months.5}}月","{{months.4}}月","{{months.3}}月","{{months.2}}月","{{months.1}}月","{{months.0}}月"],
            datasets : [
              {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                data : [{{coursecount.6}},{{coursecount.5}},{{coursecount.4}},{{coursecount.3}},{{coursecount.2}},{{coursecount.1}},{{coursecount.0}}]
              },
              {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [{{groupcount.6}},{{groupcount.5}},{{groupcount.4}},{{groupcount.3}},{{groupcount.2}},{{groupcount.1}},{{groupcount.0}}]
              }
            ]
            
          }

        var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
        
        </script>
          <div class="row">
            <div class="col-xs-12 col-sm-9">
              <h4>说明</h4>
              <p>灰色曲线显示课程申请数统计 
               蓝色曲线显示小组发布数统计 </p>
            </div><!--/span-->
             <div class="col-xs-12 col-sm-9" id="userscount">
              <h3 id="groupsandcourses">麦知网用户统计</h3>
              <canvas id="users" height="450" width="450"></canvas>
              <script>

              var pieData = [
                  {
                    value: {{publisher_count}},
                    color:"#F38630"
                  },
                  {
                    value : 0,
                    color : "#E0E4CC"
                  },
                  {
                    value : {{ordinary_user_count}},
                    color : "#69D2E7"
                  }
                
                ];

            var myPie = new Chart(document.getElementById("users").getContext("2d")).Pie(pieData);
            
            </script>
            </div><!--/span-->
            <div class="col-xs-12 col-sm-9">
              <h4>说明</h4>
              <p>蓝色为普通用户 
               橙色为发布者 </p>
            </div><!--/span-->
            
          </div><!--/row-->

<!-- write by sunpengyun  position not sure -->
          <div class="row" style="margin-top:20px;">
              <div class="col-xs-12 col-sm-9">
                  
                  <div id="baddata">
                      <h3>麦知网举报数据统计</h3>
                      <table class="table table-striped">
                        <thead>
                          <tr>
                            <th></th>
                            <th>小组</th>
                            <th>课程</th>
                            <th>悬赏</th>
                            <th>用户</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>处理</td>
                            <td>{{data.bad_group_con}}</td>
                            <td>{{data.bad_course_con}}</td>
                            <td>{{data.bad_reward_con}}</td>
                            <td>{{data.bad_user_con}}</td>
                          </tr>
                          <tr>
                            <td>误报</td>
                            <td>{{data.good_group_con}}</td>
                            <td>{{data.good_course_con}}</td>
                            <td>{{data.good_reward_con}}</td>
                            <td>{{data.good_user_con}}</td>
                          </tr>
                        </tbady>
                      </table>
                  </div>
                  <div id="passdata" style="margin-top:30px;">
                      <h3>麦知网审核数据统计</h3>
                      <table class="table table-striped">
                        <thead>
                          <tr>
                            <th></th>
                            <th>小组</th>
                            <th>发布者</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>通过</td>
                            <td>{{data.pass_group_con}}</td>
                            <td>{{data.pass_publisher_con}}</td>
                          </tr>
                          <tr>
                            <td>驳回</td>
                            <td>{{data.not_group_con}}</td>
                            <td>{{data.not_publisher_con}}</td>
                          </tr>
                        </tbady>
                      </table>
                  </div>
                  <div id="otherdata" style="margin-top:50px;">
                      <h3>麦知网数据统计</h3>
                      <table class="table table-striped">
                        <thead>
                          <tr>
                            <th></th>
                            <th>未成交悬赏</th>
                            <th>制作中悬赏</th>
                            <th>已完成悬赏</th>
                            <th>课程发布数</th>
                            <th>课程交易量</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for o in otherdata %}
                          <tr>
                            <td>{{o.0}}</td>
                            <td>{{o.1}}</td>
                            <td>{{o.2}}</td>
                            <td>{{o.3}}</td>
                            <td>{{o.4}}</td>
                            <td>{{o.5}}</td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                  </div>

              </div>
          </div>

        </div><!--/span-->

       


        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" style="position:fixed;left:70%;width:320px" id="sidebar" role="navigation">
          <div class="list-group">
            <a href="#groupsandcourses" class="list-group-item">麦知网小组/课程统计</a>
            <a href="#userscount" class="list-group-item">麦知网用户统计</a>
            <a href="#baddata" class="list-group-item">麦知网举报数据统计</a>
            <a href="#passdata" class="list-group-item">麦知网审核数据统计</a>
            <a href="#otherdata" class="list-group-item">麦知网数据统计</a>
          </div>
        </div><!--/span-->
      </div><!--/row-->

      

    
    </div><!--/.container-->



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
    
  </body>
</html>
